import { getUUid } from "@/focusSolid/path/until";
import { SwitchContext } from "@/focusSolid/store/switch";
import { BoxContext } from "@/focusSolid/store/box";
import { onMount, onCleanup, useContext, JSX } from "solid-js";
import { SolidFC } from "solid-shims";

const Index: SolidFC<JSX.HTMLAttributes<HTMLDivElement>> = function (props) {
  const [switchState, { widgetChange }] = useContext(SwitchContext);
  const [boxState] = useContext(BoxContext);
  let domEle: HTMLDivElement
  const uid = getUUid()

  onMount(() => {
    widgetChange({
      uid,
      boxId: boxState.uid,
      ele: domEle,
      rect: domEle ? domEle.getBoundingClientRect() : undefined,
    })
  })
  onCleanup(() => {
    widgetChange(uid)
  })
  return <div {...props} classList={{ "fe-focus": switchState.focus.focusId === uid }} ref={e => domEle = e}>
    {props.children}
  </div>
}

export default Index